iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
1
Modern Web

從零開始的網頁設計系列 第 8

Day07_2 : 版型設計

  • 分享至 

  • xImage
  •  

什麼叫笨蛋,我就是笨蛋,不小心按了發送所以要多寫一篇
在我們開始講解版型之前先大概分享我個人在做網頁版型的步驟
那如果你不是設計師的話其實可以跳過今天XD

1.先畫線框稿(Wireframe),去除所有視覺化的元素,簡單編排頁面

而其實通常我都是畫在紙上,不過因為要簡單明瞭一點所以我有用工具簡單的畫一下
那如果你不知道該怎麼編排好,其實可以先從比較常見或是你喜歡的的版型去設計

https://ithelp.ithome.com.tw/upload/images/20171221/20104423v1I2pV8Maf.png

2.Mockup 靜態的原稿

也就是將我們的線框稿視覺化,簡單說就是最後設計師設計出來的畫面吧XD
在這裡我就會規劃出每個元件滑鼠移過的效果,或是動畫的樣子
那如果你可能現在臨時要用圖片不知道要去哪找可以到這邊 Unsplash
這裡面的圖片都很漂亮畫質又高,然後可以免費下載
https://ithelp.ithome.com.tw/upload/images/20171221/20104423ir9Plh0UcP.png

3.Prototype (原型)

把所有的設計稿串起來模擬成品的展現方式
那因為教學用的版型我只先設計一張所以我沒有做 Prototype XD

我個人是使用Adobe Experience Design (XD) 去做我的版型設計
我在設計版型的時候最大的顧慮是自己切不切得出來這件事
以及思考目前專案得需求去做版面的設計,不會因為這個元件擺在這邊比較漂亮所以把它擺在那邊

那以上是今天版型分享部分//
接下來會利用今天設計的版型去切版,裡面的頁面部分會放接下來三十天會教的各種CSS用法範例
那希望可以在三十天過去了,你也能製作出一個屬於自己的網頁


想到就更新專業 樂樂
有任何問題都歡迎一起提出來討論>_O


上一篇
Day07 : CSS地下城冒險 _ 選擇器與優先權
下一篇
Day08 : 切版(ㄧ)_基本框架_1
系列文
從零開始的網頁設計22
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言